<template>
  <ul class="com-viewer" v-if="images.length > 0" id="viewer-images">
    <li>
      <img class="image" v-for="v in images" :key="v" :src="v">
    </li>
  </ul>
</template>

<script lang="ts">
import "viewerjs/dist/viewer.min.css";
import { UrlClearFormat } from "yb-tool";
import Viewer from "viewerjs";
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class ConViewer extends Vue {
  images: string[] = [];
  viewer?: Viewer;

  show(images: string[], index = 0) {
    this.images = images.map(url => {
      return UrlClearFormat(url);
    });
    this.$nextTick(() => {
      this.viewer = new Viewer(document.getElementById("viewer-images")!, {
        hidden: () => {
          this.close();
        }
      });
      this.viewer.view(index);
    });
  }
  close() {
    this.viewer = undefined;
    this.images = [];
  }
}
</script>

<style lang="scss" scoped>
.com-viewer {
  width: 0;
  height: 0;
  list-style: none;
  overflow: hidden;
}
</style>
